Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
a(href="https://rogeliosamuel.com/" target="_blank").dedication To Sami 🤓 .playground .washing-machine .board .button .button .button.circle .button.circle .window .content .sock.orange .sock.green .sock.red .cat .head .ear .ear.right .eye .eye .body .feet .tail .bubbles .bubble .bubble .bubble .bubble .bubble .bubble .bubble .bubble .bubble .bubble .bubble .bubble .bubble .bubble .bubble .badge .line .line .line .clothes .shirt.white .shirt.orange .shirt .shadow
*, *::before, *::after { margin : 0; padding : 0; box-sizing : border-box; } $dev : true; $animated : true; $dev : false; //$animated : false; @mixin size($w, $h: $w) { width : $w; height : $h; } @mixin animation($animation, $type : ease) { @if ($animated) { animation : $animation var(--time, 2500ms) var(--delay, 0ms) infinite $type; } } @function randomNum($min, $max) { $rand : random(); $randomNum : $min + floor($rand * (($max - $min) + 1)); @return $randomNum; } :root { --timing : 2500ms; } body { display : grid; place-items : center; height : 100vh; overflow : hidden; background-color : #69B6E1; font-size : clamp(0.6rem, calc(1vw + 0.1rem), 1.5rem); * { position : absolute; &::before, &::after { position : absolute; } } } .playground { --bottom-elements : 2.4em; --main-width : 30em; @include size(var(--main-width)); } /* ----- Shadow ----- */ .shadow { @include size(calc(var(--main-width) + 5em), 1em); border-radius : 0.5em; bottom : 2em; left : 0.5em; background-color : rgba(0, 0, 0, 0.2); z-index : -1; } /* ----- Washing machine ----- */ .washing-machine { --delay-animation : 500ms; @include size(17.5em, 25em); @include animation(shake-machine); bottom : var(--bottom-elements); left : 4em; border-radius : 2.5em 2.5em 1em 1em; background : linear-gradient(#F2FBFF 82%, #E5EBEE 82%, #E5EBEE 83%, #F2FBFF 83%); box-shadow : 4.25em 0 #C5C7C8; z-index : 1; @keyframes shake-machine { @for $i from 0 through 75 { @if ($i > 9 and $i < 54) { @if ($i % 2 == 0) { #{$i}% { transform : translateY(-0.125em); } } @else { #{$i}% { transform : translateY(0); } } } } } .board { @include size(90%, 2.5em); display : flex; align-items : center; gap : 0.5em; padding-inline : 1.5em; top : 2.25em; left : 5%; border-radius : 1em; background-color : #E8F1F4; .button { @include size(1.5em, 0.65em); position : static; border-radius : 0.15em; background-color : #D9DDDF; box-shadow : 0.15em 0 #C2C4C6; &:nth-of-type(2) { margin-right : auto; } &.circle { @include size(1.2em); border-radius : 50%; } } } .badge { @include size(3.25em, 1.85em); display : flex; flex-direction : column; align-items : center; justify-content : space-between; padding-block : 0.35em; bottom : 0.65em; right : 2em; background-color : #E5EBEE; box-shadow : -0.15em 0 #C5C7C8; border-radius : 0.25em; &::before { @include size(1.25em, 0.2em); content : ''; top : -0.2em; background-color : #D4D8DA; border-radius : 0.05em 0.05em 0 0; z-index : -1; } .line { @include size(65%, 0.175em); flex : none; position : static; border-radius : 0.1em; background-color : #D4D8DA; } } } /* ----- Clothes ----- */ .clothes { right : -4em; bottom : var(--bottom-elements); .shirt { --bg : #FCB900; --shadow : #D59800; --extra-bg : linear-gradient(transparent, transparent); --shadow-size : 85%; --height : 0.75em; @include size(7em, var(--height)); position : static; border-radius : calc(var(--height) / 2); background : var(--extra-bg), radial-gradient(circle calc(var(--height) / 2) at var(--shadow-size) 50%, var(--bg) 100%, transparent 0), linear-gradient(90deg, var(--bg) var(--shadow-size), var(--shadow) var(--shadow-size)); &.orange { --bg : #EE6E02; --shadow : #C55602; } &.white { @function extra-bg-color($value) { @return linear-gradient(90deg, transparent $value, var(--extra-bg-color) $value, var(--extra-bg-color) $value + 3, transparent $value + 3); } --extra-bg-color : #CCD0D2; --bg : #F7EAEA; --shadow : #CCD0D2; --extra-bg : #{extra-bg-color(60%)}, #{extra-bg-color(65%)}; } } } /* ----- Window ----- */ .window { --border-color : #E5EBEE; --bg-color : #6E6D71; @include size(12.25em); left : 9em; top : 7em; transform : translateX(-50%); border-radius : 50%; box-shadow : 0.6em 0 #C5C7C8; background-color : var(--bg-color); overflow : hidden; z-index : 1; &::before { @include size(100%); --opacity-color : rgba(255, 255, 255, 0.15); content : ''; box-shadow : 0 0 0 1.5em var(--border-color) inset; border-radius : 50%; z-index : 10; background : linear-gradient(-45deg, transparent 53%, var(--opacity-color) 53%, var(--opacity-color) 55%, transparent 55%, transparent 59%, var(--opacity-color) 59%, var(--opacity-color) 65%, transparent 65%); } &::after { @include size(4em); content : ''; right : -0.55em; top : 50%; transform : translateY(-50%); border-radius : 50%; background-color : var(--border-color); } } .content { @include size(100%); @include animation(content-rotate, ease-in-out); @keyframes content-rotate { 0%, 55% { transform : rotate(-3turn); } 24%, 48% { filter : blur(0.075em); } 48% { filter : none; } 55% { transform : initial; } } } .cat { --bg-cat : #2A2538; @include size(4.5em, 6.5em); left : 3.95em; bottom : 1em; transform-origin : center top; .head { @include size(100%, 2em); display : flex; justify-content : center; align-items : center; gap : 0.15em; top : 0.75em; border-radius : 1em; background-color : var(--bg-cat); .eye { @include size(0.75em); position : static; margin-top : -0.325em; border-radius : 50%; clip-path : polygon(0 50%, 100% 50%, 100% 100%, 0 100%); background : radial-gradient(circle 0.15em at 50% 50%, black 100%, transparent 0), white; } .ear { --height : 0.75em; --width : 0.45em; --position : 1.1em; width : 0; border-style : solid; border-width : 0 var(--width) var(--height) var(--width); border-color : transparent transparent var(--bg-cat) transparent; top : calc(var(--height) * -1); left : var(--position); &.right { left : initial; right : var(--position); z-index : 5; transform-origin : bottom left; @include animation(ear-animation); @keyframes ear-animation { 0%, 68%, 78%, 86% { transform : skew(0); } 74%, 82% { transform : skew(-40deg); } } } } } .body { @include size(70%, 3.35em); top : 2.65em; left : 50%; transform : translateX(-50%); background-color : var(--bg-cat); } .feet { @include size(4.75em, 1.25em); bottom : 0.7em; right : -0.25em; border-radius : 0.75em; background-color : var(--bg-cat); } .tail { @include size(4.5em); left : -2.25em; bottom : 1.25em; border-radius : 50%; background : radial-gradient(circle 0.3em at 30% 11.5%, var(--bg-cat) 100%, transparent 0), radial-gradient(circle 1.65em at 50% 50%, var(--bg-color) 100%, transparent 0), conic-gradient(transparent 152deg, var(--bg-cat) 152deg 330deg, transparent 330deg); z-index : -1; } } .sock { --bg-color : #F8A11E; --line-color : #EE6D02; --x : 0; --y : 0; --deg : 0; @include size(2.25em, 3em); transform : rotate(var(--deg)) translate(var(--x), var(--y)); z-index : 5; &::before { @include size(1.15em, 1.925em); content : ''; border-radius : 0.1em 0.1em 0 0.1em; background : linear-gradient(var(--bg-color) 25%, var(--line-color) 25%, var(--line-color) 35%, var(--bg-color) 35%, var(--bg-color) 45%, var(--line-color) 45%); } &::after { @include size(1.15em, 1.75em); content : ''; background : radial-gradient(circle 0.55em at 50% 100%, var(--bg-color) 100%, transparent 0), var(--line-color); bottom : -0.2em; border-radius : 0.1em 0 1em 1em; transform-origin : center top; transform : rotate(-45deg) translateX(-0.15em); } &.orange { --deg : 60deg; bottom : -0.35em; left : 5em; @include animation(sock-falling); &::after { transform : rotate(-45deg) translate(-0.15em, -0.1em); } @keyframes sock-falling { 50% { bottom : 10em; } 70%, 73% { transform : rotate(60deg); left : 4.75em; bottom : 5em; } 80% { transform : rotate(20deg); } 100% { bottom : 0; transform : rotate(-80deg); } } } &.green { --bg-color : #387D45; --line-color : #4BB15F; --deg : 120deg; bottom : -0.15em; left : 2.5em; } &.red { --bg-color : #EE6B77; --line-color : #EA3949; --deg : 45deg; bottom : 0; left : 1.5em; } } .bubbles { @include size(4em, 1em); transform : translateX(-50%); bottom : 0; z-index : 5; left : 45%; .bubble { @include size(var(--size)); border-radius : 50%; background-color : #fff; @include animation(bounce-bubble); @keyframes bounce-bubble { 0%, 15%, 25%, 40% { transform : translateY(0); } 10%, 35% { transform : translateY(var(--bounce)); } 20% { transform : translateY(var(--bounce)); } } @for $i from 1 through 20 { &:nth-of-type(#{$i}) { // Me dio hueva hacer una función para esto. Perdonen --bounce : #{randomNum(10, 20) / 10 * -1}em; --bounce-two : #{randomNum(10, 20) / 10 * -1}em; --size : #{randomNum(5, 9) / 10}em; --delay : #{$i * 13}ms; left : randomNum(0, 99) * 1%; } } } } @if $dev { *:not(img, body, html) { outline : 1px solid; opacity : 0.75; } .playground { outline : 3px solid; } img { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width : 30em; } } @else { img { display : none; } } .dedication { color : white; font-family : sans-serif; bottom : 1rem; text-decoration : none; } .twitter-button * { position : initial; }
// Original https://dribbble.com/shots/5797861-How-to-Clean-Your-Cat-101/attachments/11058119?mode=media